<script setup>

const props = defineProps(['title','data'])
//const emit = defineEmits(['avg'])

import * as echarts from 'echarts';
import { onMounted, watch } from 'vue';

var myChart = null

//生命周期管理
onMounted(() =>{
  // 基于准备好的dom，初始化echarts实例
  myChart = echarts.init(document.getElementById('charts'));
  myChart.setOption({
      title: {
        text: props.title
      },
      tooltip: {},
      animationEasing: 'elasticOut',
      animationDuration: 1000,
      xAxis: {
        data: props.data.date
      },
      yAxis: {
        scale: true
      },
      series: [
        {
          type: 'candlestick',
          data: props.data.kline
        }
      ]
  })
});

watch(props.data, (newdata, olddata)=>{
  myChart.setOption({
      xAxis: {
        data: props.data.date
      },
      series: [
        {
          type: 'candlestick',
          data: props.data.kline
        }
      ]
    });

    //var tmp = 0
    
    //props.data.yAxis.forEach(element => {
    //  tmp += element
    //});
    //emit('avg', tmp / props.data.yAxis.length)

})

</script>

<template>

  <div id="charts" style="width: 600px;height:400px;">
  </div>
</template>

<style scoped>

</style>
